<template>
    <div>
        <el-dialog
            title="用户详情"
            :visible.sync="centerDialogVisible"
            :close-on-click-modal="false"
            :before-close="close"
            width="50%"
            top="5vh"
            :fullscreen="isfullscreenDlalog"
            center>
            <div slot="title">
               <span style="text-align: center;font-size: 20px;color: #000;">用户详情</span>
            </div>
            <div slot="title">
               <span v-if="isfullscreenDlalog === false" style="position: absolute; right: 45px; top: 21px;" @click="openClick()" class="screen"><i class="el-icon-full-screen" ></i></span>
               <span v-else style="position: absolute; right: 45px; top: 21px;" @click="onClick()" class="screen">
                  <img src="@/assets/images/romanUser/suoxiao.png">
               </span>
            </div>
            <div class="userView_content">
                <div class="top1">
                    <el-row :gutter="24">
                        <el-col :span="12">
                            <el-card shadow="never" :body-style="{ padding: '20px' }">
                                <div style="display: flex; justify-content: space-between;">                                
                                    <div class="top1_left">
                                        <el-avatar :size="65" @error="errorHandler">
                                            <img src="@/assets/images/romanUser/userImg.jpg"/>
                                        </el-avatar>
                                        <div class="top1_left_sex">{{userObj.sex}}</div>
                                    </div>     
                                    <div class="top1_right">
                                        <div class="top1_right_top">
                                            <span style="font-size: 19px; font-weight:600;">{{userObj.nickname}}</span>
                                            <span style="margin-top: -30px;font-size: 13px; color: #409EFF">{{userZl}}</span>
                                        </div>
                                        <div class="top1_right_bottom">
                                            <span class="shenfen">{{userObj.member}}</span>
                                            <div style="margin-top: -6px;">
                                                 <el-rate v-model="userObj.starId" disabled color='#FF9900' :max="userObj.starId"></el-rate>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </el-card>
                        </el-col>
                        <el-col :span="12">
                            <el-card shadow="never" :body-style="{ padding: '0px' }">
                                <div class="wrap">
                                    <div class="information" v-for="item in information" :key="item.id">
                                        <span style="font-size: 18px;">{{item.number}}</span>
                                        <span style="margin-top: 18.5px;">{{item.name}}</span>
                                    </div>
                                </div>
                            </el-card>
                        </el-col>
                    </el-row>
                </div>
                <div class="top2">
                    <el-row :gutter="24">
                        <el-col :span="12">
                           <el-card shadow="never" :body-style="{ padding: '0px' }">
                               <div class="top2_content">
                                 <div class="top2_content_num1">
                                    Ta对别人
                                 </div>
                                 <div class="top2_content_num2">
                                   <div class="top2_content_num2_left">
                                      <span>点赞</span>
                                      <span style="font-weight: 600;">88</span>
                                   </div>
                                   <div class="top2_content_num2_right">
                                     <span>喜欢</span>
                                     <span style="font-weight: 600;">88</span>
                                   </div>
                                 </div>
                                 <div class="top2_content_num3">
                                   <div class="top2_content_num3_left">
                                     <span>聊一聊</span>
                                     <span style="font-weight: 600;">88</span>
                                   </div>
                                   <div class="top2_content_num3_right">
                                     <span>交换微信</span>
                                     <span style="font-weight: 600;">88</span>                                   
                                   </div>
                                 </div>
                               </div>
                           </el-card>
                        </el-col>
                        <el-col :span="12">
                           <el-card shadow="never" :body-style="{ padding: '0px' }">
                               <div class="top2_content">
                                 <div class="top2_content_num1">
                                    别人对Ta
                                 </div>
                                 <div class="top2_content_num2">
                                   <div class="top2_content_num2_left">
                                      <span>点赞</span>
                                      <span style="font-weight: 600;">88</span>
                                   </div>
                                   <div class="top2_content_num2_right">
                                     <span>喜欢</span>
                                     <span style="font-weight: 600;">88</span>
                                   </div>
                                 </div>
                                 <div class="top2_content_num3">
                                   <div class="top2_content_num3_left">
                                     <span>聊一聊</span>
                                     <span style="font-weight: 600;">88</span>
                                   </div>
                                   <div class="top2_content_num3_right">
                                     <span>交换微信</span>
                                     <span style="font-weight: 600;">88</span>                                   
                                   </div>
                                 </div>
                               </div>                  
                           </el-card>
                        </el-col>
                    </el-row>
                </div>
                <div class="top3">
                    <div class="top3_top">Ta认证</div>
                    <div class="top3_content">
                       <div class="top3_content_item" v-for="item in certification" :key="item.id">
                         <el-badge :value="item.news" class="item">
                            <el-button type="primary" size="small" plain round style="padding:16px;">{{item.name}}</el-button>
                          </el-badge>
                       </div>
                    </div>
                </div>
                <div class="top4">
                     <div class="top4_top">内心独白</div>
                     <div class="top4_top_content">
                         希望找一个三观一致的女孩子
                     </div>
                </div>
                <div class="top5">
                     <div class="top5_top">基本资料</div>
                     <div class="to5_content">
                        <el-row :gutter="24">
                          <el-col :span="12">
                              <el-card shadow="never" :body-style="{ padding: '0px' }">
                                  <div class="top5_content_left">
                                       <div class="top5_content_left_item">
                                         <span>罗曼ID</span>
                                         <span>{{userObj.lmId}}</span>
                                       </div>
                                       <div class="top5_content_left_item">
                                         <span>昵称</span>
                                         <span>{{userObj.nickname}}</span>
                                       </div>
                                       <div class="top5_content_left_item">
                                         <span>居住地</span>
                                         <span>{{userObj.residence}}</span>
                                       </div>
                                       <div class="top5_content_left_item">
                                         <span>月收入</span>
                                         <span>{{userInformation.monthlyIncome}}</span>
                                       </div>
                                      <div class="top5_content_left_item">
                                         <span>毕业院校</span>
                                         <span>{{userInformation.graduated}}</span>
                                       </div>
                                      <div class="top5_content_left_item">
                                         <span>单位</span>
                                         <span>{{userInformation.company}}</span>
                                       </div>
                                       <div class="top5_content_left_item">
                                         <span>婚姻状态</span>
                                         <span>{{userInformation.maritalStatus}}</span>
                                       </div>
                                  </div>
                              </el-card>
                          </el-col>
                          <el-col :span="12">
                              <el-card shadow="never" :body-style="{ padding: '0px' }">
                                  <div class="top5_content_right">
                                       <div class="top5_content_right_item">
                                         <span>微信号</span>
                                         <span>{{userInformation.wechatNumber}}</span>
                                       </div>  
                                       <div class="top5_content_right_item">
                                         <span>年龄</span>
                                         <span>{{userObj.age}}岁</span>
                                       </div>                                   
                                       <div class="top5_content_right_item">
                                         <span>身高</span>
                                         <span>{{userObj.height}}</span>
                                       </div> 
                                       <div class="top5_content_right_item">
                                         <span>学历</span>
                                         <span>{{userObj.education}}</span>
                                       </div> 
                                       <div class="top5_content_right_item">
                                         <span>行业</span>
                                         <span>{{userInformation.industry}}</span>
                                       </div> 
                                       <div class="top5_content_right_item">
                                         <span>职业</span>
                                         <span>{{userInformation.position}}</span>
                                       </div> 
                                       <div class="top5_content_right_item">
                                         <span>我在寻找</span>
                                         <span>{{userInformation.lookingFor}}</span>
                                       </div> 
                                  </div>
                              </el-card>
                          </el-col>
                        </el-row>
                     </div>
                </div>
                <div class="top6">
                   <div class="top6_top">详细资料</div>
                   <div class="top6_content">
                     <el-row :gutter="24">
                       <el-col :span="12">
                          <el-card shadow="never" :body-style="{ padding: '0px' }">
                              <div class="top6_content_left">
                                  <div class="top6_content_left_item" v-for="item in detailsLeft" :key="item.id">
                                    <span>{{item.keyName}}</span>
                                    <span>{{item.value}}</span>
                                  </div> 
                              </div>
                          </el-card>
                       </el-col>
                       <el-col :span="12">
                          <el-card shadow="never" :body-style="{ padding: '0px' }">
                              <div class="top6_content_right" v-for="item in detailsRight" :key="item.id">
                                  <div class="top6_content_right_item">
                                    <span>{{item.keyName}}</span>
                                    <span>{{item.value}}</span>
                                  </div> 
                              </div>
                          </el-card>
                       </el-col>
                     </el-row>
                   </div>
                </div>
                <div class="top7">
                   <div class="top7_top">择偶条件</div>
                   <div class="top7_content">
                     <el-row :gutter="24">
                       <el-col :span="12">
                          <el-card shadow="never" :body-style="{ padding: '0px' }">
                              <div class="top7_content_left">
                                  <div class="top7_content_left_item" v-for="item in singleLeft" :key="item.id">
                                    <span>{{item.keyName}}</span>
                                    <span>{{item.value}}</span>
                                  </div> 
                              </div>
                          </el-card>
                       </el-col>
                       <el-col :span="12">
                          <el-card shadow="never" :body-style="{ padding: '0px' }">
                              <div class="top7_content_right" v-for="item in singleRight" :key="item.id">
                                  <div class="top7_content_right_item">
                                    <span>{{item.keyName}}</span>
                                    <span>{{item.value}}</span>
                                  </div> 
                              </div>
                          </el-card>
                       </el-col>
                     </el-row>
                   </div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>
<script>
// import screenfull from "screenfull";

export default {
  name: "viewDetails",
  props: {
    propsObj: {   // 用户详情数据
      type: Object,
      required: true,
    }
  }, 
  data() {
    return {
      isFullscreen: false,
      isfullscreenDlalog: false,
      centerDialogVisible: true,
      userObj: {},
      userZl:'资料: 52%',
      information:[
        {id: '0', number: '8888', name: '可用积分'},
        {id: '1', number: '0', name: '访问次数'},
        {id: '2', number: '8', name: '邀请好友'},
        {id: '3', number: '0', name: '牵线次数'}
      ],
      certification: [
        { id: '0', name: '手机认证', news: null},
        { id: '1', name: '真人认证', news: null},
        { id: '2', name: '身份证认证', news: null},
        { id: '3', name: '职业认证', news: null},
        { id: '4', name: '学历认证', news: null},
        { id: '5', name: '车辆认证', news: null},
        { id: '6', name: '房产认证', news: null},
        { id: '7', name: '辅助认证', news: '12'}
      ],
      userInformation: {
        monthlyIncome: '6000-8000元',
        graduated: '华南理工大学',
        company: '互联网公司',
        maritalStatus: '未婚',
        wechatNumber: 'yanglili',
        industry: 'IT/互联网',
        position: '前端工程师',
        lookingFor: '恋人'
      },
      detailsLeft: [
        { id: '0', keyName: '住房情况', value: '已购房'},
        { id: '1', keyName: '体重', value: '65KG'},
        { id: '2', keyName: '籍贯', value: '广东广州'},
        { id: '3', keyName: '家中排行', value: '老大'},
        { id: '4', keyName: '宗教信仰', value: '无'},
        { id: '5', keyName: '属相', value: '虎'}
      ],
      detailsRight: [
        { id: '0', keyName: '购车情况', value: '已购车'},
        { id: '1', keyName: '民族', value: '汉族'},
        { id: '2', keyName: '户口', value: '广东广州'},
        { id: '3', keyName: '有无子女', value: '无'},
        { id: '4', keyName: '星座', value: '巨蟹座'},
        { id: '5', keyName: '血型', value: 'O型'}
      ],
      singleLeft: [
        { id: '0', keyName: '年龄', value: '25-28岁'},
        { id: '1', keyName: '身高', value: '160'},
        { id: '2', keyName: '月收入', value: '4000-6000元'},
        { id: '3', keyName: '住房情况', value: '已购房'},
        { id: '4', keyName: '星座', value: '水瓶座'},
        { id: '5', keyName: '籍贯', value: '广东广州'}
      ],
      singleRight: [
        { id: '0', keyName: '居住地', value: '广东广州'},
        { id: '1', keyName: '学历', value: '大专及以上'},
        { id: '2', keyName: '星级', value: '3星'},
        { id: '3', keyName: '购车情况', value: '已购车'},
        { id: '4', keyName: '行业', value: 'IT/互联网'},
        { id: '5', keyName: '婚姻状况', value: '未婚'}
      ]
    }
  },
  watch: {
    propsObj: {
      handler(val,oldval){
        this.userObj = val
        this.userObj.starId = Number(this.userObj.starId);
      },
      deep:true,
      immediate:true
    }
  },
  // mounted() {
  //   this.init();
  // },
  // beforeDestroy() {
  //   this.destroy();
  // },
  methods: {
    // 关闭弹框；
    closeTheReportDrawer(){
      this.centerDialogVisible = false;
    },
    close(){
      this.$emit('closeTheReportDrawer');
    },
    // 用户头像
    errorHandler() {
      return true
    },
    // 对话框是否全屏
    openClick(){
      this.isfullscreenDlalog = true;
    },
    onClick(){
      this.isfullscreenDlalog = false;
    }
    // isclick() {
    //   // 判断是否支持
    //   if (!screenfull.enabled) {
    //     this.$message({
    //       message: "不支持全屏",  
    //       type: "warning"
    //     });
    //     return false;
    //   }
    //   screenfull.toggle();
    // },
    // change() {
    //   this.isFullscreen = screenfull.isFullscreen
    // },
    // init() {
    //   if (screenfull.enabled) {
    //     screenfull.on('change', this.change)
    //   }
    // },
    // destroy() {
    //   if (screenfull.enabled) {
    //     screenfull.off('change', this.change)
    //   }
    // },
  }
}
</script>

<style lang="less" scoped>
@import '@/style/variables.less';
.userView_content{
     border-top: 1px solid #E4E4E4;
     margin-top: -13px;
     padding: 20px;
     width: 100%;
     height: 600px;
     overflow: auto;
    .top1{
      .top1_left{
          width: 25%;
          .top1_left_sex{
             background-color: #29a4fb;
             color: #fff;
             width: 24px;
             height: 24px;
             line-height: 23px;
             text-align: center;
             border-radius: 50%;
             position: absolute;
             top: 65px;
             left: 73px;
          }
      }
      .top1_right{
          width: 80%;
          .top1_right_top{
              margin-top: 5px;
              display: flex;
              justify-content: space-between;
              align-items: center;
          }
      }
      .top1_right_bottom{
          width: 106%;
          margin-top: 10px;
          display: flex;
          justify-content: start;
          align-items: center;
          .shenfen{
              color: #fff;
              font-size: 13px;
              width: 78px;
              height: 25px;
              line-height: 25px;
              text-align: center;
              border-radius: 20px;
              background-color: #EB474E
          }
          div{
              margin-left: 5px;
          }
      }
      .wrap {
         width: 100%;
         display: flex;
        .information{
            width: 25%;
            padding: 20px 10px;
            border-right: 1px solid #E4E4E4;
            display: flex;
            flex-direction: column;    
            span {
                text-align: center;
                font-size: 16px;
                font-weight: 800;
            }
        }
        .information:last-child {
            border-right: none;
        }
      }

    }
    .top2{
       margin-top: 20px;
       .top2_content{
         background-color: #F2F2F2;
         width: 100%;
         margin: 0;
         padding: 0;
         .top2_content_num1{
           padding: 13px;
           border-bottom: 1px solid #E4E4E4;
           font-size: 16px;
           font-weight: 600;
         }
         .top2_content_num2{
           display: flex;
           width: 100%;
           border-bottom: 1px solid #E4E4E4;
           .top2_content_num2_left{
             width: 50%;
             display: flex;
             justify-content: space-around;
             align-items: center;
             padding: 13px 0;
             font-size: 16px;
             border-right: 1px solid #E4E4E4;
           }
           .top2_content_num2_right{
             width: 50%;
             display: flex;
             justify-content: space-around;
             align-items: center;
             padding: 13px 0;
             font-size: 16px;
           }
         }
         .top2_content_num3{
           display: flex;
           width: 100%;
           border-bottom: 1px solid #E4E4E4;
           .top2_content_num3_left{
             width: 50%;
             display: flex;
             justify-content: space-around;
             align-items: center;
             padding: 13px 0;
             font-size: 16px;
             border-right: 1px solid #E4E4E4;
           }
           .top2_content_num3_right{
             width: 50%;
             display: flex;
             justify-content: space-around;
             align-items: center;
              padding: 13px 0;
             font-size: 16px;
           }
         }
       }
    }
    .top3{
      margin-top: 23px;
      .top3_top {
        font-size: 14px;
        color: #000;
        font-weight: 800;
      }
      .top3_content {
        margin-top: 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
    .top4{
      margin-top: 23px;
      .top4_top {
        font-size: 14px;
        color: #000;
        font-weight: 800;
      }
      .top4_top_content{
        margin-top: 10px;
        background-color: #F2F2F2;
        padding: 13px;
      }
    }
    .top5{
      margin-top: 23px;
      .top5_top { 
        font-size: 14px;
        color: #000;
        font-weight: 800;
      }
      .to5_content{
        margin-top: 10px;
        .top5_content_left{
          background-color: #F2F2F2;
          .top5_content_left_item{
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 13px 20px;
            border-bottom: 1px solid #E4E4E4;
          }
        }
        .top5_content_right{
          background-color: #F2F2F2;
          .top5_content_right_item{
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 13px 20px;
            border-bottom: 1px solid #E4E4E4;
          }
        }
      }
    }
    .top6{
      margin-top: 23px;
      .top6_top { 
        font-size: 14px;
        color: #000;
        font-weight: 800;
      }    
      .top6_content{
        margin-top: 10px;
        .top6_content_left{
          background-color: #F2F2F2;
          .top6_content_left_item{
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 13px 20px;
            border-bottom: 1px solid #E4E4E4;
          }
        }
        .top6_content_right{
          background-color: #F2F2F2;
          .top6_content_right_item{
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 13px 20px;
            border-bottom: 1px solid #E4E4E4;
          }
        }
      }
    }
    .top7{
      margin-top: 23px;
      .top7_top { 
        font-size: 14px;
        color: #000;
        font-weight: 800;
      }    
      .top7_content{
        margin-top: 10px;
        .top7_content_left{
          background-color: #F2F2F2;
          .top7_content_left_item{
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 13px 20px;
            border-bottom: 1px solid #E4E4E4;
          }
        }
        .top7_content_right{
          background-color: #F2F2F2;
          .top7_content_right_item{
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 13px 20px;
            border-bottom: 1px solid #E4E4E4;
          }
        }
      }
    }
}
.screen {
  width:17px;
  height:17px;
  cursor: pointer;
  line-height:17px;
    img {
      width: 100%;
      height: 100%;
    }
}
.screen:hover {
  cursor: pointer;
}
</style>
<style lang="less">
 .el-icon-star-on {
   font-size: 26px;
}
.el-badge__content.is-fixed {
  top: 8px;
  right: 17px;
}
.top1_right_bottom .el-rate__item {
  margin-top: 0;
}
</style>